<template>
	<view class="box">
		<view class="" v-if="saslesCarInfo.length > 0">
		<view v-for="(item,index) in saslesCarInfo" :key="index">
			<view class="content">
				<view class="title">
					<text>{{item.modelName}}</text>
				</view>
				<view class="carInfo">
					<text class="infoLeft">{{item.carRegistrationTime}}上牌/{{item.mileage}}万公里/{{item.cityName}}</text>
					<text class="infoRight">{{item.sellingPrice}}万</text>
				</view>
				<view class="bottom">
					<!-- <text class="date" style="line-height: 60rpx;">{{item.releaseTime}}</text> -->
					<text class="status" style="line-height: 60rpx;" v-if="item.verifyStatus==1">待审核</text>
					<text class="status" style="line-height: 60rpx; "
						v-if="item.verifyStatus==2 && item.cucStatus==1">未上架</text>
					<text class="status" style="line-height: 60rpx; color: #09BB07;"
						v-if="item.verifyStatus==2 && item.cucStatus==2">在售中</text>
					<text class="status" style="line-height: 60rpx; color: #09BB07;"
						v-if="item.verifyStatus==2 && item.cucStatus==3">已售出</text>
					<text class="status" style="line-height: 60rpx; "
						v-if="item.verifyStatus==2 && item.cucStatus==4">已下架</text>
					<text class="status" style="line-height: 60rpx;" v-if="item.verifyStatus==3">审核不通过</text>
					<view class="cxsq" @click="viewreason(index)"  v-if="item.verifyStatus==3">重新申请</view>
					<view class="cxsq" @click="changeStatus(index)" v-if="item.verifyStatus==2 && item.cucStatus==2">取消</view>
				</view>
			</view>
			<view class="yy">
				<!-- <button size="mini" @click="changeStatus(item)"
					v-if="item.verifyStatus==2 && item.cucStatus==2">取消</button> -->
				<!-- <button size="mini" disabled style="background-color: #9D9D9D;color:#FFFFFF"
					v-if="item.verifyStatus==2 && item.cucStatus==4">已下架</button> -->
				<view v-if="item.verifyStatus==3">
					<text>原因:{{item.description}}</text>
				</view>	
				<!-- <button size="mini" @click="viewreason(index)" >原因</button> -->
			</view>
		</view>
			
			<view class="prompt_language">
				<text>以上是您的{{count}}条记录</text>
			</view>
			<u-popup v-model="show" mode="center" width="260px" height="auto" border-radius="14" closeable="true"
				close-icon-pos="top-right" close-icon-size="24">
				<view class="popup">
					<text class="popup_title">未通过原因</text>
					<text style="text-align: center;"> {{description}} </text>
					<button type="default" size="mini" @click="editSellCar()">重新申请</button>
				</view>
			</u-popup>
		</view>


		<null :iconSize="160" :textSize="28" v-else></null>
		
		<u-loadmore :status="status" :load-text="loadText"  id="loadmore"/>

	</view>
</template>

<script>
	import API from "@/api/addCar.js"
	export default {
		data() {
			return {
				saslesCarInfo: [],
				count: 0,
				parms: {
					page: 1,
					limit: 10
				},
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				usedCarId: '',
				isshow: true,
				show: false,
				description: '原因'
			}
		},
		onReachBottom(){
			uni.showLoading({
				title: this.status,
			});
			this.status = 'loading';
			this.parms.page = this.parms.page + 1;
				API.getSellCarList(this.parms).then(res => {
					this.saslesCarInfo = this.saslesCarInfo.concat(res.data)
					console.log(this.saslesCarInfo);
					this.count = res.count
				})
				if (this.parms.page * this.parms.limit >= this.count) {
					this.status = 'nomore';
				} else {
					this.status = 'loadmore';
				}
		},
		onShow() {
			
		},
		created() {
			this.getSellCarList();
		},
		
		methods: {
			getSellCarList(){
				API.getSellCarList(this.parms).then(res => {
					console.log(res)
					this.saslesCarInfo = res.data;
					//隐藏按钮
				
					for (let i = 0; i < res.data.length; i++) {
						this.saslesCarInfo[i].carRegistrationTime = res.data[i].carRegistrationTime.substring(0, 7);
						// console.log(this.saslesCarInfo[i].description)
						if (this.saslesCarInfo[i].verifyStatus == 1 && this.saslesCarInfo[i].cucStatus == 1 && this
							.saslesCarInfo[i].cucStatus == 3) {
							this.isshow = false;
						}
					}
					this.count = res.count
					// console.log(this.saslesCarInfo)
				})
			},
			changeStatus(e) {
				// console.log(e)
				let userCarId = e.usedCarId;
				API.cancelSellCar({
					usedCarId: userCarId,
				}).then(res => {
					console.log(res)
				})
			},
			//原因弹窗
			viewreason(index) {
				console.log(index)
				this.description = this.saslesCarInfo[index].description;
				// console.log(this.saslesCarInfo[index].usedCarId)
				this.usedCarId = this.saslesCarInfo[index].usedCarId
				// console.log(this.description)
				// this.show = true
				this.editSellCar()
			},
			//编辑二手车
			editSellCar(){
				// console.log(this.usedCarId)
				uni.navigateTo({
					url:'/pagesA/sellCar/editSellCar?usedCarId='+this.usedCarId
				})
				this.show = false
			}
		},
	}
</script>

<style scoped>
	.cxsq{
		width: 152rpx;
		height: 68rpx;
		background: #002B56;
		border-radius: 4rpx;
		color: #fff;
		font-size: 28rpx;
		line-height: 68rpx;
		text-align: center;
	}
	.yy{
		padding-left: 22rpx;
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.box {
		width: 100%;
		height: 100%;
		padding: 24rpx 24rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.content {
		/* width: 100%; */
		height: auto;
		margin: 24rpx 24rpx 0 ;
		border-bottom: 1rpx solid #eee;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		/* margin-bottom: 20rpx; */
	}

	.title {
		margin-bottom: 10rpx;
	}

	.title text {
		font-size: 30rpx;
		color: #2C2C2C;
	}

	.carInfo {
		display: flex;
		justify-content: space-between;
		    margin-top: 5rpx;
	}

	.carInfo .infoLeft {
		font-size: 28rpx;
		color: #999999;
	}

	.carInfo .infoRight {
		color: #FF552E;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.bottom button {
		margin: 0;
		background-color: #002B56;
		color: #FFFFFF;
		border-radius: 48rpx;
	}

	.date {
		font-size: 24rpx;
		color: #999999;
	}

	.popup {
		padding: 20rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.popup_title {
		display: block;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}

	.popup text{
		margin: 20rpx 0;
	}

	.status {
		color: #FF552E;
	}

	.prompt_language {
		background-color: #FFFFFF;
		padding: 24rpx;
		color: #9D9D9D;
		text-align: center;
		font-weight: 500;
	}
	
</style>
